<template>
    <div>
        <span style="font-weight: bold;"> 采购员: </span>&emsp;
        <el-select v-model="form.Buyer" multiple placeholder="-- --" style="width: 240px">
            <el-option label="罗翔" :value="1" />
            <el-option label="扬家霖" :value="2" />
            <el-option label="雷鑫" :value="3" />
            <el-option label="王单青" :value="4" />
            <el-option label="温暖暖" :value="5" />
            <el-option label="杨杰" :value="6" />
            <el-option label="赵丽" :value="7" />
            <el-option label="黄强" :value="8" />
        </el-select>
        <span style="font-weight: bold;"> 采购日期:</span>&emsp;
        <el-date-picker v-model="form.PurchaseDate" type="date" style="width: 200px;border: none;"
            placeholder="日期" />&emsp;&emsp;
        <br>
        <span style="font-weight: bold;"> 供应商: </span>&emsp;
        <el-select v-model="form.Supplier" multiple placeholder="-- --" style="width: 240px">
            <el-option label="默认" :value="0" />
        </el-select>
        <br>
        <span style="font-weight: bold;"> 摘要: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.Abstract" placeholder="-- --" />
        <span style="font-weight: bold;"> 单据号: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.DocumentNo" placeholder="-- --" />
        <span style="font-weight: bold;"> 流水号: </span>&emsp;
        {{ form.SerialNo }}
        <el-button type="danger" style="float: left;;margin-left: 10px;">+ 新增</el-button>&emsp;
        <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;" @click="">删除</el-button>
    </div>
    <h2 style="background-color:lightpink;margin-top: 20px;" v-if="totals != 0"> &emsp;&emsp;已选择 {{ totals }} 条</h2>
    <hr style="border: 4px solid lightgray;margin-top: 20px;" />
    <el-table :data="tableData" height="400" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="procId" label="序号" />
        <el-table-column prop="earId" label="耳号" />
        <el-table-column prop="transferBuild" label="栋舍" />
        <el-table-column prop="transferField" label="栏位" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="standardPackage" label="商品名称" />
        <el-table-column prop="transferPen" label="标包" />
        <el-table-column prop="measurementUnit" label="计量单位" />
        <el-table-column prop="inventoryQuantity" label="入库数量" />
        <el-table-column prop="averagePrice" label="只均单价" />
        <el-table-column prop="amountMoney" label="金额" />
        <el-table-column prop="unitDiscount" label="单位折扣" />
        <el-table-column prop="adjustAmount" label="调整金额" />
        <el-table-column prop="settlementAmount" label="结算金额" />
        <el-table-column prop="totalWeight" label="总重量" />
    </el-table>

    <el-pagination style="float: left" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="slot" :total="form.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <el-button v-for="item in form.totalPage" :disabled="form.PageIndex == item"
            style="background-color: lightpink;" @click="handleCurrentChange(item)">{{
                item
            }}</el-button>
    </el-pagination>
    <el-pagination style="float: right;" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="  prev, pager, next" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import {
    Delete,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();


//钩子函数
onMounted(() => {
    getTable()//获取表格数据 
    getRecordcottage()//剧哦去获取栋舍
})


const form = reactive({
    procIds: [],
    EarId: '',
    TransferBuild: '',
    Buyer: "",//采购员
    PurchaseDate: '',//采购日期
    SheepCategory: '',//羊只类型
    Category: '',//类别
    AccountingUnit: '',//核算单元
    Supplier: '',//供应商
    Warehouse: '',//仓库
    Abstract: '',//摘要  
    DocumentNo: '',
    SerialNo: '',
    PageIndex: 1,
    PageSize: 5,
    totalPage: 1,
    totalCount: 1,
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    form.procIds = multipleSelection.value.map((item: any) => item.motherGivingBirthId)

    console.log(form.procIds)
}

//计算属性 
const totals = computed(() => {
    let totalNumber = 0;
    form.procIds.forEach((item: any) => {
        totalNumber += 1
    })
    return totalNumber
})

//获取栋舍
const Recordcottage = ref<any>([]);
const getRecordcottage = () => {
    axios.post('http://localhost:5039/api/Cottages/CottageList', {
    }).then(res => {
        Recordcottage.value = res.data.data;
    })
}

//分页
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    form.PageSize = val;
    getTable();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    form.PageIndex = val;
    getTable();
};
//查询表数据
const tableData = ref([]); //获取数据
const getTable = () => {
    axios.get('http://localhost:5039/api/Sales_Purchases/PersonalProcurementList', {
        params: {
            PurchaseDate: form.PurchaseDate,
            Category: form.Category,
            Warehouse: form.Warehouse,
            TransferBuild: form.TransferBuild || 0,
            EarId: form.EarId || 0,
            Buyer: form.Buyer || 0,
            DocumentNumber: form.DocumentNo,
            Supplier: form.Supplier || 0,
            PageIndex: form.PageIndex,
            PageSize: form.PageSize,
        }
    }).then(res => {
        tableData.value = res.data.item;
        form.totalCount = res.data.totalCount;
        form.totalPage = res.data.totalPage;
        console.log('获取数据成功');
    })

}


// //批量删除
// const DeletesRange = () => {
//     axios.post('http://localhost:5039/api/ProductionManagement/MotherGivingBirthDelet', {
//         motherGivingBirthIds: form.motherGivingBirthIds
//     }).then(res => {
//         if (res.data.code == 0) {
//             ElMessage({
//                 message: '删除成功',
//                 type: 'success',
//             })
//             getTable()
//         }
//     })
// }

const handleEdit = (row: any) => {
    console.log(row);
};
const handleDelete = (row: any) => {
    console.log(row)
}










</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
